<template>
  <div class="wrapper">
    <p>全部评论————————————————————</p>
    <div class="user" v-for="item in response" :key="item.comment_id">
      <div class="big">
        <div class="user-img">
          <img :src="item.avatar" alt="" />
        </div>
        <div class="info">
          <div class="username">{{ item.nickname }}</div>
          <div class="pl">{{ item.text }}</div>
          <div class="xh">♥{{ item.is_author }}</div>
        </div>
        <div class="ti">{{ item.date }}</div>
      </div>
      <div class="small" v-for="it in item.sub_comment" :key="it.comment_id">
        <div class="user-img">
          <img :src="it.avatar" alt="" />
        </div>
        <div class="info">
          <div class="username">{{ it.nickname }}</div>
          <div class="pl">{{ it.text }}</div>
          <div class="xh">♥{{ it.is_author }}</div>
        </div>
        <div class="ti">{{ it.date }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      response: [],
    };
  },
  created() {
    this.mounted();
  },
  methods: {
    async mounted() {
      const res = await this.$http.get(
        "http://douyin.bytedance.com/api/comment/list"
      );
      console.log(res, "数据");
      this.response = res.data.comments;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.wrapper {
  padding: 20px;
  width: 60%;
  height: 100%;
  background-color: rgb(235, 235, 235);
  margin: auto;
  .user {
    width: 100%;
    border-bottom: 1px solid rgb(148, 144, 144);
    .small {
      width: 100%;
      height: 75px;
      display: flex;
      padding-left: 100px;
      position: relative;
      margin-top: 20px;
      .user-img {
        width: 47px;
        height: 47px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .username {
          color: grey;
          font-size: 15px;
        }
        .pl {
          color: black;
          font-size: 18px;
        }
      }
      .ti {
        position: absolute;
        right: 20px;
        top: 20px;
        color: grey;
        font-size: 15px;
      }
    }
    .big {
      width: 100%;
      height: 75px;
      display: flex;
      position: relative;
      .user-img {
        width: 47px;
        height: 47px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .username {
          color: grey;
          font-size: 15px;
        }
        .pl {
          color: black;
          font-size: 18px;
        }
      }
      .ti {
        position: absolute;
        right: 20px;
        top: 20px;
        color: grey;
        font-size: 15px;
      }
    }
  }
}
</style>